<script setup>
import { inject, ref } from 'vue'
const emit = defineEmits(['changeMsg'])
const msg = defineProps({
  farther: String
})
const injectMsg = inject('rootMsg')

const childrenMsg = ref('this js chidlren msg')
const changeMsgs = () => {
  emit('changeMsg', 'this is new msg')
}
defineExpose({
  childrenMsg
})
</script>
<template>
  <div>{{ msg.farther }}{{ childrenMsg }}</div>
  <p>{{ injectMsg }}</p>
  <button @click="changeMsgs">click</button>
</template>